
<template>
    <div class="feedback">
        <div class="question">
            <textarea style="resize: none;" name="" id="" placeholder="请尽量详细描述您的问题" v-model="content"></textarea>
        </div>
        <div class="methods">
            <div class="left">联系电话</div>
            <div class="input"><input v-model="phone" placeholder="选填，便于我们与您联系" type="text"></div>
        </div>
        <div class="upload-img">
            <div class="title">上传凭证（选填）</div>
            <div class="img">
                <p v-if="imgs.length!=0" v-for="(item,index) in imgs" :key="index"><img ref="imgss" :src="item+'?x-oss-process=image/resize,m_fill,h_240,w_240'" alt=""><span @click="deleteImg(index)" class="feed-close" ><img src="../../assets/image/cha.png" alt=""></span></p>
                <p :class="{'p_hide': ispshow}" @click="takephoto()"><img src="../../assets/image/add.png" alt=""></p>
            </div>
        </div>
        <div @click="subit()" class="authentication">提交</div>
        <div class="popup-container">
            <mt-popup
              v-model="popupVisible"
              position="top"
              :modal="modal">
              {{popupContent}}
            </mt-popup>
        </div>
    </div>
</template>

<script>
import Header from '../common/header';
import axios from 'axios';
import Wx from 'weixin-js-sdk';
import { MessageBox, Toast, Popup } from 'mint-ui';
import { setTimeout } from 'timers';
export default {
    data () {
        return {
            reason: '',
            name: '',
            idcard: '',
            phone: '',
            popupContent: '',
            modal: false,
            popupVisible: false,
            src: '',
            isclose: true,
            obj: {},
            // imgs: ['http://ldfs.oss-cn-shenzhen.aliyuncs.com/14539884e9e259cbd08098b3105028df.jpg','http://cpark.oss-cn-shanghai.aliyuncs.com/c6c8eed068ab7dd0f13baa837259e182.jpg','http://cpark.oss-cn-shanghai.aliyuncs.com/fdc69a4db35de31bca35a6420b69a7ba.png'],
            content: '',
            imgs: [],
            ispshow: false,
            n: 3
        }
    },
    components: {
        'mt-popup': Popup,  
    },
    mounted() {
        const vm = this;
        let url = window.location.href;
        vm.wxShare(url);
    },
    created() {
        
    },
   
    methods: {
        deleteImg(index){
            const vm = this;
            vm.imgs.splice(index,1);
            
            if(vm.imgs.length<3){
                vm.ispshow = false;
            }
        },
        takephoto(){

            if(this.imgs.length>=3){
                return;
            }
            this.n = 3-this.imgs.length;
            const vm = this,
              
            upload = vm.wxUpload(Wx);
            let ajaxUp = function(id) {
                vm.$axiosPost('/Api/Upload/downloadWxImage', {'media_id': id}).then(json => {
                    vm.sheetVisible = false;
                    // 上传成功，后台不保存，前台更新用户头像
                    console.log(json);
                    if (json.data.code == 1) {
                        vm.imgs.push(json.data.url);
                        console.log(vm.$refs.imgss);
                        console.log(vm.imgs);
                        if( vm.imgs.length>=3){
                            vm.ispshow = true;
                        }else {
                            vm.ispshow= false;
                        }
                        console.log(vm.imgs,111);
                    } else {
                        MessageBox.alert(json.data.msg);
                    }
                }, function() {
                    MessageBox.alert('网络异常，上传失败');
                });
            }
            Wx.ready(function(){
                upload.chooseImg(ajaxUp, vm.n);
            });
        },
        subit(){
            const vm = this;
            if(vm.content == ''){
                vm.popupVisible = true;
                vm.popupContent = '请填写您的问题';
                vm.modal = true;
                setTimeout(function(){ 
                    vm.popupVisible = false;
                    vm.modal = false;
                },1600)
                return;
            }
            let phoneReg = /^1[34578]\d{9}$/;
            if(vm.phone!=''&&!phoneReg.test(vm.phone)){
                vm.popupVisible = true;
                vm.popupContent = '请输入正确的联系电话';
                vm.modal = true;
                setTimeout(function(){
                    vm.popupVisible = false;
                    vm.modal = false;
                },1600)
                 return;
            }
            vm.obj = {
                content: vm.content,
                phone: vm.phone,
                img: vm.imgs
            }
            axios.post('/Weixin/FeedBack/feedBack',vm.obj).then(res=>{
                const data = res.data;
                // console.log(data);
                if(data.code==1){
                    vm.$router.replace('/feedbacksuccess');
                }else {
                    MessageBox.alert(data.msg);
                }
            }).catch(()=>{
                MessageBox.alert('网络错误');
            })
        }
    }
}
</script>

<style>
    .p_hide {
        display: none;
    }
</style>
